<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #canvas {
            display: block;
            background: linear-gradient(#34fdaa, #08b1ac);
        }
    </style>
</head>

<body>
<audio id="myaudio" src=""></audio>
<canvas id="canvas"></canvas>

<script>
    let title = document.getElementsByTagName('title')[0]
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    let audioArray = ['HITA - 赤伶.mp3', '平生不晚 - 难却.mp3', '村西、王馨悦 - 戒网.mp3', '银临、Aki阿杰 - 牵丝戏.mp3'];
    let audioNum = 0;
    let oAudio = document.getElementById('myaudio');
    oAudio.crossOrigin = 'anonymous';
    oAudio.src = `./music/${audioArray[audioNum]}`;
    title.innerText=audioArray[audioNum]
    let WIDTH = canvas.width;
    let HEIGHT = canvas.height;
    window.onresize = function () {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        WIDTH = canvas.width;
        HEIGHT = canvas.height;
    }
    window.onclick = function () {
        if (oAudio.paused) {
            oAudio.play();
        } else {
            oAudio.pause();
        }
        let oCtx = new AudioContext();
        let audioSrc = oCtx.createMediaElementSource(oAudio);
        let analyser = oCtx.createAnalyser();
        audioSrc.connect(analyser);
        analyser.connect(oCtx.destination);
        analyser.fftSize = 128;
        let bufferLength = analyser.frequencyBinCount
        console.log(bufferLength);
        let dataArray = new Uint8Array(bufferLength)
        console.log(dataArray)
        console.log(dataArray.length)
        let barWidth = ((WIDTH / bufferLength) - 1)
        let barHeight

        function draw() {
            analyser.getByteFrequencyData(dataArray);
            let x = 0;
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            for (let i = 0; i < bufferLength; i++) {
                barHeight = dataArray[i]
                ctx.fillStyle = 'rgb(228,255,255)'
                ctx.fillRect(WIDTH / 2 + x, HEIGHT / 2, barWidth, -barHeight)
                ctx.fillRect(WIDTH / 2 - x, HEIGHT / 2, barWidth, -barHeight)
                ctx.fillRect(WIDTH / 2 + x, HEIGHT / 2, barWidth, barHeight)
                ctx.fillRect(WIDTH / 2 - x, HEIGHT / 2, barWidth, barHeight)
                x += barWidth + 1;
            }
            window.requestAnimationFrame(draw)
        }

        draw()
    }

    oAudio.onended = function () {
        console.log("播放结束")
        if (audioNum === audioArray.length - 1) {
            audioNum = 0
        } else {
            audioNum++
        }
        oAudio.src = `./music/${audioArray[audioNum]}`
        title.innerText=audioArray[audioNum]
        oAudio.play()
    }
</script>
</body>

</html>
